<template>
  <div>
    <ul class="mui-table-view">
		<li class="mui-table-view-cell mui-media" v-for="item in newlist" :key="item.id">
			<router-link :to="'/home/newsinfo/' + item.id ">
				<img class="mui-media-object mui-pull-left" :src="item.img">
				<div class="mui-media-body">
					<h1>{{item.title}}</h1>
					<p class='mui-ellipsis'>
						<span>发表时间： {{item.ctime | dateFormat}}</span>
						<span>点击：{{item.click}}次</span>
					</p>
				</div>
			</router-link>
		</li>
	</ul>
  </div>
</template>

<script>
	export default{
		data(){
			return {
				newlist: [] // 新闻资讯列表数据的数组
			}
		},
		created(){
			this.getNewsList();
		},
		methods:{
			getNewsList(){ 
				// 获取新闻资讯数据方法
				this.$http.get("getnewslist.php").then(result =>{
					console.log(result.body);
					if (result.body.status == 0) {
						// 成功
						this.newlist = result.body.message;
					}else{
						// 失败
						Toast('加载新闻资讯列表数据error...')
					}

				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.mui-table-view{
	li{
		h1{font-size: 14px;}
		.mui-ellipsis{
			font-size: 12px;
			color: #226aff;
			display: flex;
			justify-content: space-between;
		}
	}
}
</style>
